<template>
  <div class="dataBase class-model">
    <ContentWrap>
      <back :backOption="backOption" />
      <el-form-item class="mt5">
        <el-button type="danger" @click="batchDel" :disabled="ids.length === 0"> 删除 </el-button>
      </el-form-item>
      <AsyncTable
        v-bind="tableOption"
        ref="tableRef"
        :fetchData="fetchData"
        @selection-change="getIds"
      />
      <Dialog
        v-model="dialogVisible"
        title="编辑模型版本"
        width="30%"
        close-on-click-modal
        destroy-on-close
      >
        <el-form
          label-suffix="："
          label-width="100px"
          :rules="rules"
          :model="saveValue"
          ref="formRef"
        >
          <el-form-item label="模型版本" prop="moduleVersion">
            <ns-input
              placeholder="请输入任务名称"
              v-model="saveValue.moduleVersion"
              :maxlength="50"
              clearable
            />
          </el-form-item>
          <el-form-item label="版本描述" prop="describe">
            <ns-input
              placeholder="请输入备注"
              type="textarea"
              v-model.trim="saveValue.describe"
              :rows="6"
              :maxlength="150"
              @input="saveValue.describe = saveValue.describe.replace(/\s+/g, '')"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="save">确定</el-button>
          </span>
        </template>
      </Dialog>
    </ContentWrap>
  </div>
</template>

<script setup lang="tsx">
import * as apiModelVersion from '@/api/machineModel/modelManage'
import { useRoute } from 'vue-router'
const { proxy } = getCurrentInstance()
const ids = ref([])
const formRef = ref()
const tableRef = ref()
const route = useRoute()
const dialogVisible = ref(false)
const backOption = reactive({
  title: '模型版本'
})
const tableOption = reactive({
  columns: [
    {
      type: 'selection'
    },
    {
      prop: 'moduleVersion',
      label: '模型版本'
    },
    {
      label: '采用状态',
      render: ({ row }) => {
        return (
          <>
            <span>{row.addStatus == 0 ? '采用中' : '已采用'}</span>
          </>
        )
      }
    },
    {
      prop: 'describe',
      label: '版本描述'
    },
    {
      label: '启用状态',
      render: ({ row }) => {
        return (
          <>
            <el-switch
              v-model={row.status}
              onChange={(val) => {
                switchStatus(row, val)
              }}
              active-value={1}
              inactive-value={0}
              active-color="#409EFF"
              inactive-color="#ff4949"
            />
          </>
        )
      }
    },
    {
      prop: 'createTime',
      label: '创建时间'
    },
    {
      width: '150px',
      label: '操作项',
      render: ({ row }) => {
        return (
          <>
            <el-button
              type="primary"
              link
              onClick={() => {
                edit(row)
              }}
            >
              编辑
            </el-button>
            <ns-button
              type="danger"
              confirm
              link
              onClick={() => {
                del(row)
              }}
            >
              删除
            </ns-button>
          </>
        )
      }
    }
  ],
  data: []
})
const fetchData = async ({ page, pageSize }) => {
  const { data, count } = await apiModelVersion.modelVersionList({
    page,
    pageSize,
    moduleId: route.query.id
  })
  return { data, count }
}
const getIds = (selections) => {
  ids.value = []
  ids.value = selections.map((item) => item.id)
}
const switchStatus = (row, val) => {
  if (row.moduleId) {
    apiModelVersion.editModelVersion({ ...row, status: val }).then(({ code }) => {
      code === 200 && ElMessage.success('修改成功')
      code === 200 && query()
    })
  }
}
const edit = (row) => {
  dialogVisible.value = true
  saveValue.id = row.id
  saveValue.moduleVersion = row.moduleVersion
  saveValue.describe = row.describe
  saveValue.status = row.status
  saveValue.name = row.name
  saveValue.moduleId = row.moduleId
}
const save = async () => {
  const v = await formRef.value.validate()
  if (v) {
    const { code } = await apiModelVersion.editModelVersion({ ...saveValue })
    code === 200 && ElMessage.success('修改成功')
    code === 200 && query()
    dialogVisible.value = false
  }
}
const saveValue = reactive({
  describe: '',
  moduleVersion: '',
  moduleId: '',
  status: '',
  id: '',
  name: ''
})
const rules = ref({
  moduleVersion: [{ required: true, message: '请输入模型版本', trigger: 'blur' }]
})
const del = async (row) => {
  const { code } = await apiModelVersion.delModelVersion({ idList: [row.id] })
  code === 200 && ElMessage.success('删除成功')
  code === 200 && query()
}
const batchDel = () => {
  proxy?.$modal.confirm('确定删除选中该版本？').then(async () => {
    const { code } = await apiModelVersion.delModelVersion({ idList: ids.value })
    code === 200 && ElMessage.success('删除成功')
    code === 200 && query()
  })
}
const query = () => {
  tableRef.value.resetPage()
  tableRef.value.fetchData()
}
</script>

<style scoped></style>
